<template>
  <div id="listDetails">
    <app-header :name="name"></app-header>
    <div class="cont">
      <ul class="cont_head">
        <li class="img">
          <img :src="list_detail.img">
        </li>
        <li class="price">
          <span>￥{{list_detail.price}}</span>
          <div>
            <ul v-for="(item, index) in mydata.collect" :key="index">
              <li><img :src="item.img" alt="" srcset=""></li>
              <li>{{item.text}}</li>
            </ul>
          </div>
        </li>
        <li class="title_header">
          <img v-if="list_detail.Ico" :src="list_detail.Ico" alt="">
          {{list_detail.detail.title}}
        </li>
        <li class="text">
          {{list_detail.detail.text}}
          <a href="#">查看</a>
        </li>
      </ul>
      <ul class="cont_foot">
        <li class="discounts list" @click="discounts=true">
          <div class="listHeader">{{list_detail.detail.discounts.title}}</div>
          <div class="discounts_text">
            <ul>
              <li class="list_text" v-for="(item, index) in list_detail.detail.discounts.discounts" :key="index">
                <span>{{item.neck}}</span>
                <span>{{item.text}}</span>
              </li>
            </ul>
          </div>
        </li>
        <li class="whiteBar list" @click="whiteBar=true">
          <div class="listHeader">{{list_detail.detail.whiteBar.title}}</div>
          <div>{{list_detail.detail.whiteBar.text}}</div>
        </li>
        <li class="select list">
          <div class="listHeader">{{list_detail.detail.select.title}}</div>
          <div class="select_text text_mid">
            <ul>
              <li>
                <span v-for="(item, index) in list_detail.detail.select.select" :key="index">{{item}}</span>
              </li>
              <li class="safeguard" v-if="list_detail.detail.select.safeguard">{{list_detail.detail.select.safeguard}}</li>
            </ul>
          </div>
        </li>
        <li class="deliverTo list text_mid">
          <div class="listHeader">{{list_detail.detail.deliverTo.title}}</div>
          <div class="deliverTo_text ">
            <ul>
              <li>{{list_detail.detail.deliverTo.site}}</li>
              <li class="predict">{{list_detail.detail.deliverTo.predict}}</li>
            </ul>
          </div>
        </li>
        <li class="kg list">
          <div class="listHeader">{{list_detail.detail.kg.title}}</div>
          <div>{{list_detail.detail.kg.kg}}</div>
        </li>
        <li class="serve list">
          <div>
            <span v-for="(item, index) in list_detail.detail.serve" :key="index"><img :src="item.ico" alt="" srcset="">{{item.text}}</span>
          </div>
        </li>
        <div class="hide">
          <mt-popup class="discounts_hide list_hide" v-model="discounts" position="bottom">
            <ul>
              <li>
                <span>{{list_detail.detail.discounts.title}}</span>
                <img src="../../../static/image/ico/关闭.png">
              </li>
              <li>{{list_detail.detail.discounts.title_f}}</li>
              <li class="list_text right" v-for="(item, index) in list_detail.detail.discounts.discounts" :key="index">
                <span>{{item.neck}}</span>
                <span>{{item.text}}</span>
              </li>
              <li class="combination">
                <span v-for="item in 5" :key="item">
                  <img class="img" :src="list_detail.img">
                  <img class="ico" src="../../../static/image/ico/加.png">
                  <img class="img" :src="list_detail.img">
                </span>
              </li>
            </ul>
          </mt-popup>
          <mt-popup class="discounts_hide list_hide" v-model="whiteBar" position="bottom">
            <ul>
              <li>
                <span>{{list_detail.detail.discounts.title}}</span>
                <img src="../../../static/image/ico/关闭.png">
              </li>
              <li>{{list_detail.detail.discounts.title_f}}</li>
              <li class="list_text right" v-for="(item, index) in list_detail.detail.discounts.discounts" :key="index">
                <span>{{item.neck}}</span>
                <span>{{item.text}}</span>
              </li>
              <li class="combination">
                <span v-for="item in 5" :key="item">
                  <img class="img" :src="list_detail.img">
                  <img class="ico" src="../../../static/image/ico/加.png">
                  <img class="img" :src="list_detail.img">
                </span>
              </li>
            </ul>
          </mt-popup>
        </div>
      </ul>
      <div class="recommend">
        <div class="title">
          <span>猜 你 喜 欢</span>
          <div></div>
        </div>
        <div class="productList">
          <productList :ulw2="'ulW2'" :productList="datas.productList"></productList>
        </div>
      </div>
      <div class="footers">
        <div class="download">
          <ul v-for="(item, index) in download" :key="index">
            <li><img :src="item.ico" alt="" srcset=""></li>
            <li>{{item.txt}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="left">
        <router-link to="">
          <ul>
            <li>
              <img src="../../../static/image/ico/联系.png" alt="" srcset="">
            </li>
            <li>联系客服</li>
          </ul>
        </router-link>
        <router-link to="">
          <ul>
            <li>
              <img src="../../../static/image/ico/商店.png" alt="" srcset="">
            </li>
            <li>店铺</li>
          </ul>
        </router-link>
        <router-link to="/ShopCar">
          <ul>
            <li>
              <img src="../../../static/image/ico/购物车1.png" alt="" srcset="">
            </li>
            <li>购物车</li>
          </ul>
        </router-link>
      </div>
      <div class="right">
        <button @click="addCar" type="button">加入购物车</button><button type="button">立即购买</button>
      </div>
    </div>
    <div class="hide_add">
      <mt-popup class="add_car hide_list" v-model="add_car" position="bottom">
        <ul>
          <li class="title_head">
            <img class="title_img" :src="list_detail.img">
            <img class="title_ico" src="../../../static/image/ico/省略.png" alt="" srcset="">
            <ul>
              <li>￥{{list_detail.price}}</li>
              <li>
                <span>{{list_detail.detail.select.title}}</span>
                <span v-for="(item, index) in list_detail.detail.select.select " :key="index">{{item}}</span>
                个
              </li>
            </ul>
          </li>
          <li class="color list_select">
            <ul>
              <li>{{list_detail.detail.select.color.title}}</li>
              <li>
                <span :class="{active:colors==index}" @click="color(index)" v-for="(item, index) in list_detail.detail.select.color.color" :key="index">{{item}}</span>
              </li>
            </ul>
          </li>
          <li class="versions list_select">
            <ul>
              <li>{{list_detail.detail.select.versions.title}}</li>
              <li>
                <span :class="{active:versionss==index}" @click="versions(index)" v-for="(item, index) in list_detail.detail.select.versions.versions" :key="index">{{item}}</span>
              </li>
            </ul>
          </li>
          <li class="suit list_select">
            <ul>
              <li>{{list_detail.detail.select.suit.title}}</li>
              <li>
                <span :class="{active:suits==index}" @click="suit(index)" v-for="(item, index) in list_detail.detail.select.suit.suit" :key="index">{{item}}</span>
              </li>
            </ul>
          </li>
          <li class="number list_select">
            <ul>
              <li>
                <span>{{list_detail.detail.select.number.title}}</span>
                <div>
                  <button type="button" @click="increase">-</button>
                  <span>{{list_detail.detail.select.number.number}}</span>
                  <button type="button" @click="decrease">+</button>
                </div>
              </li>
            </ul>
          </li>
          <li class="sure">
            <button type="button" @click="sure">确定</button>
          </li>
        </ul>
      </mt-popup>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Common/Header'
import { Toast } from 'mint-ui'
import productList from '@/components/My/module/ProductList'

export default {
  name: 'listdetails',
  components: {
    'app-header': Header,
    productList

  },
  data () {
    return {
      name: 'listDetails',
      list: [],
      data: '',
      title: '',
      dataIndex: '',
      index: '',
      list_detail: '',
      colors: '',
      versionss: '',
      suits: '',
      discounts: false,
      whiteBar: false,
      add_car: false,
      arr: 1,
      datas: '',
      download: [
        { ico: '../../../static/image/my/list/ico/APP.png', txt: '客户端' },
        { ico: '../../../static/image/my/list/ico/国际.png', txt: '国际端' },
        { ico: '../../../static/image/my/list/ico/PC.png', txt: '电脑端' }
      ],
      mydata: {
        collect: [
          { img: '../../../static/image/ico/钱.png', text: '降价提示' },
          { img: '../../../static/image/ico/星.png', text: '收藏' }
        ]
      }
    }
  },
  mounted () {
    this.getdata()
  },
  methods: {
    getdata () {
      this.axios.get('../../../static/json/data.json').then(item => {
        this.datas = item.data.data
      })
      this.axios.get('../../../static/json/list.json').then(item => {
        this.data = item.data.data
        this.title = JSON.parse(localStorage.getItem('title'))
        this.dataIndex = JSON.parse(localStorage.getItem('dataIndex'))
        this.data[this.dataIndex].cellphone.forEach((item, index) => {
          if (item.title === this.title) {
            this.index = index
            this.list_detail = item
          }
        })
      })
    },
    addCar () {
      this.add_car = true
    },
    color (index) {
      this.colors = index
      this.list_detail.detail.select.select[0] = this.list_detail.detail.select.color.color[index]
    },
    versions (index) {
      this.versionss = index
      this.list_detail.detail.select.select[1] = this.list_detail.detail.select.versions.versions[index]
    },
    suit (index) {
      this.suits = index
      this.list_detail.detail.select.select[2] = this.list_detail.detail.select.suit.suit[index]
    },
    increase () {
      this.list_detail.detail.select.number.number--
      this.list_detail.detail.select.select[3] = this.list_detail.detail.select.number.number
    },
    decrease () {
      this.list_detail.detail.select.number.number++
      this.list_detail.detail.select.select[3] = this.list_detail.detail.select.number.number
    },
    sure () {
      let tempList = []
      if (localStorage.getItem('dataList')) {
        tempList = JSON.parse(localStorage.getItem('dataList'))
      }
      tempList.forEach(item => {
        if (item.title === this.list_detail.title) {
          this.arr++
        }
      })
      if (this.arr <= 1) {
        tempList.push(this.list_detail)
        Toast({
          message: '添加成功',
          duration: 3000
        })
      } else {
        Toast({
          message: '购物车已有此物品',
          duration: 3000
        })
      }
      console.log(this.arr)
      this.arr = 1
      localStorage.setItem('dataList', JSON.stringify(tempList))
      this.add_car = false
    }
  }
}
</script>
<style scoped lang="less">
#listDetails {
  .cont {
    .cont_head {
      background: rgba(255, 255, 255, 1);
      padding: 0 20px;
      .img {
        img {
          width: 80%;
          margin: 0 10%;
        }
      }
      .price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span:nth-of-type(1) {
          color: rgba(255, 0, 0, 1);
          font-size: 40px; /*px*/
          font-weight: 900;
        }
        div {
          display: flex;
          ul {
            li {
              text-align: center;
              padding: 5px 15px;
              img {
                height: 32px; /*px*/
              }
            }
          }
        }
      }
      .title_header {
        line-height: 40px;
        font-size: 32px; /*px*/
        font-weight: 900;
        img {
          height: 38px; /*px*/
          vertical-align: middle;
        }
      }
      .text {
        line-height: 35px; /*px*/
        a {
          text-decoration: underline;
          color: rgba(255, 0, 0, 1);
        }
      }
    }
    .cont_foot {
      .discounts {
        margin: 20px 0 0 0;
        border-bottom: 1px solid rgba(188, 188, 188, 1);
      }
      .list_text {
        span:first-child {
          color: rgba(255, 0, 0, 1);
          border: 1px solid rgba(255, 0, 0, 1);
          margin: 0 10px 0 0;
        }
      }
      .whiteBar {
        margin: 0 0 20px 0;
      }
      .select,
      .kg {
        border-bottom: 1px solid rgba(200, 200, 200, 1);
      }
      .serve {
        div {
          padding: 0 0 0 20px;
          span {
            display: inline-block;
            line-height: 30px;
            img {
              transform: translateY(-2px);
              margin: 0 5px 0 15px;
              vertical-align: middle;
            }
          }
        }
      }
      .listHeader {
        color: rgba(155, 155, 155, 1);
        padding: 0 20px;
      }
      .list {
        display: flex;
        padding: 25px 70px 25px 0;
        background: rgba(255, 255, 255, 1)
          url("../../../static/image/ico/省略.png") right 20px top 20px
          no-repeat;
        background-size: 32px; /*px*/
        ul {
          li {
            padding: 0 0 15px 0;
          }
          li:last-child {
            padding: 0;
          }
        }
      }
      .text_mid {
        ul {
          li:last-child {
            color: rgba(99, 99, 99, 1);
            font-size: 20px; /*px*/
          }
        }
      }
      .hide {
        .list_hide {
          width: 100%;
          ul {
            padding: 0 0 300px 0;
            li {
              padding: 10px 20px;
            }
            li:nth-of-type(1) {
              padding: 20px;
              font-size: 28px; /*px*/
              background: rgba(200, 200, 200, 1);
              display: flex;
              justify-content: space-between;
              img {
                vertical-align: middle;
              }
            }
            .right {
              background: url("../../../static/image/ico/右.png") right 20px
                center no-repeat;
            }
            .combination {
              span {
                img {
                  vertical-align: middle;
                }
                margin: 0 5px;
                .img {
                  width: 45px;
                }
                .ico {
                  width: 20px;
                }
              }
            }
          }
        }
      }
    }
    .recommend {
      .title {
        padding: 20px;
        position: relative;
        text-align: center;
        span {
          font-weight: 900;
          font-size: 32px; /*px*/
          padding: 0 25px;
          background: linear-gradient(
            left,
            rgba(255, 0, 255, 1),
            rgba(0, 255, 255, 1) ;
          );
          -webkit-background-clip: text;
          color: rgba(0, 0, 0, 0);
        }
      }
    }
    .footers {
      background: rgba(255, 255, 255, 1);
      .myFooter {
        width: 100%;
        padding: 30px 0;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid rgba(155, 155, 155, 1);
        li {
          text-align: center;
          width: 25%;
          border-right: 1px solid rgba(88, 88, 88, 1);
        }
        li:nth-of-type {
          border: none;
        }
      }
      .download {
        padding: 15px 0;
        display: flex;
        justify-content: space-between;
        ul {
          width: 33.33%;
          li {
            display: flex;
            justify-content: center;
            img {
              height: 64px;
            }
          }
        }
      }
    }
  }
  .footer {
    background: rgba(255, 255, 255, 1);
    width: 100%;
    display: flex;
    height: 120px; /*px*/
    position: fixed;
    bottom: 0;
    .left {
      display: flex;
      justify-content: space-around;
      width: 50%;
      align-items: center;
      a {
        ul {
          vertical-align: middle;
          text-align: center;
          img {
            width: 40px;
          }
        }
      }
    }
    .right {
      width: 50%;
      display: flex;
      button {
        border: none;
        width: 100%;
        height: 100%;
        color: rgba(255, 255, 255, 1);
        font-size: 28px; /*px*/
      }
      button:first-child {
        background: rgba(255, 255, 0, 1);
      }
      button:last-child {
        background: rgba(255, 0, 0, 1);
      }
    }
  }
  .hide_add {
    .hide_list {
      width: 100%;
      ul {
        .title_head {
          padding: 0 20px 0 200px;
          position: relative;
          .title_img {
            width: 150px;
            position: absolute;
            top: -30px;
            left: 20px;
          }
          .title_ico {
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
            right: 20px;
          }
          ul {
            li {
              padding: 10px 0;
              span {
                line-height: 30px;
              }
            }
            li:first-child {
              color: rgba(255, 0, 0, 1);
              font-size: 32px; /*px*/
            }
            li:last-child {
              span:first-child {
                color: rgba(99, 99, 99, 1);
              }
              font-size: 24px; /*px*/
            }
          }
        }
        .list_select {
          padding: 20px 20px 0 20px;
          ul {
            li {
              padding: 10px 0;
              span {
                display: inline-block;
              }
            }
            li:nth-of-type(1) {
              color: rgba(99, 99, 99, 1);
            }
            li:nth-of-type(2) {
              span {
                border-radius: 5px;
                margin: 0 10px 10px 0;
                padding: 7px 14px;
              }
            }
          }
        }
        .number {
          ul {
            li {
              display: flex;
              align-items: center;
              justify-content: space-between;
              span {
                vertical-align: middle;
              }
            }
          }
        }
        .sure {
          button {
            width: 100%;
            height: 60px;
            font-size: 28px;
            background: rgba(255, 0, 0, 1);
            color: rgba(255, 255, 255, 1);
            margin: 200px 0 0 0;
          }
        }
      }
    }
  }
  .alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.active {
  background: rgba(255, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
}
</style>
